<template>
  <div>
    <a-form :inline="true">
      <a-form-item>
        <a-date-picker v-model:value="billDate_alipay" valueFormat="YYYY-MM-DD" placeholder="选择账单日期"/>
      </a-form-item>
      <a-form-item>
        <a-button type="primary" @click="downloadBillAliPay('trade')">下载交易账单</a-button>
      </a-form-item>
      <a-form-item>
        <a-button type="primary" @click="downloadBillAliPay('signcustomer')">下载资金账单</a-button>
      </a-form-item>
    </a-form>

    <a-table :columns="columns" :data-source="refundInfoList" :pagination="pagination"
             row-key="id" style="word-break: break-all;">
    </a-table>
  </div>
</template>

<script setup lang="ts">
import {ref} from "vue";
import {getRefundInfoList, queryTradeBill} from "@/api/payment";
import {message, TableColumnType} from "ant-design-vue";

const billDate_alipay = ref()

interface DataType {
  key: string;
  id: number;
}

//标签
const columns: TableColumnType<DataType>[] = [
  {
    title: '商户订单编号',
    align: "center",
    width: 150,
    dataIndex: 'orderNo',
  },
  {
    title: '商户退款单编号',
    align: "center",
    width: 150,
    dataIndex: 'refundNo',
  },
  {
    title: '原订单金额(分)',
    align: "center",
    width: 150,
    dataIndex: 'totalFee',
  },
  {
    title: '退款金额(分)',
    align: "center",
    width: 150,
    dataIndex: 'refund',
  },
  {
    title: '退款原因',
    align: "center",
    width: 200,
    dataIndex: 'reason',
  },
  {
    title: '退款状态',
    align: "center",
    width: 200,
    dataIndex: 'refundStatus',
  },
  {
    title: '创建时间',
    align: "center",
    dataIndex: 'createTime',
  },
  {
    title: '更新时间',
    align: "center",
    dataIndex: 'updateTime',
  }
];

//退款列表
const refundInfoList = ref()

//获取退款列表
const handleRefundInfoList = () => {
  getRefundInfoList(pagination.value.current, pagination.value.pageSize).then((res) => {
    refundInfoList.value = res.data.data.map.list
    pagination.value.total = res.data.data.map.total
  })
}

//分页参数
const pagination = ref({
  size: 'large',
  current: 1,
  pageSize: 10,
  total: 0,
  pageSizeOptions: ['10', '20', '30'],
  showTotal: (total: number) => {
    return " 共" + total + "条"
  },
  showSizeChanger: true,
  onShowSizeChange: (current: number, pageSize: number) => {
    pagination.value.pageSize = pageSize
    handleRefundInfoList()
  },
  onChange: (current: number) => {
    pagination.value.current = current
    handleRefundInfoList()
  }
})

//下载账单(支付宝)
const downloadBillAliPay = (type: string) => {
  queryTradeBill(billDate_alipay.value, type).then((res) => {
    if (res.data.code === 400) {
      message.error(res.data.message)
    } else {
      const element = document.createElement('a')
      element.setAttribute('href', res.data.data.downloadUrl)
      element.setAttribute('download', billDate_alipay.value + '-' + type)
      element.style.display = 'none'
      element.click()
    }
  })
}

handleRefundInfoList()
</script>

<style lang="less" scoped>

</style>